<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import shuju from '@/assets/data/order.json'
	// import orderApi from '@/api/ttwq/order.ts'
	import dayjs from 'dayjs'
	import axios from 'axios'

	const router = useRouter()
	const uploading : any = ref(false)
	const pathurl : any = ref(`${import.meta.env.VITE_APP_API_BASEURL}`)
	const activeName = ref('0')
	const nodata : any = new URL('@/assets/images/nodata.png', import.meta.url).href
	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
		status: '4'
	})
	const total : any = ref(0)
	const firstcount : any = ref(0)
	const secondcount : any = ref(0)
	const refundcount : any = ref(0)



	// 详情
	function detail(e : any) {
		router.push({
			name: 'ordermanagementdetail',
			query: {
				id: e.id
			}
		})
	}
	const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()
	pagination.value.size = 20
	pagination.value.sizes = [20, 50, 100]

	// 表格数据
	const url : any = ref(shuju)
	const dataList = ref(url.value.data)
	onMounted(() => {
		getList()
		getCount()
	})
	/* 切换菜单 */
	function handleClick(tab : TabsPaneContext, event : Event) {
		console.log(tab, event)
		// if (Number(tab.index) === 0) {
		// 	paging.value.status = '3'
		// } else if (Number(tab.index) === 1) {
		// 	paging.value.status = '4'
		// } else if (Number(tab.index) === 2) {
		// 	paging.value.status = '6'
		// }
		activeName.value = (tab.index) + ""
		getList()
	}
	function getCount() {
		// orderApi.order_list({ page: 1, limit: 1, status: '3' }).then((res : any) => {
		// 	refundcount.value = res.count
		// 	console.log(res, 'resres')
		// })
		// orderApi.order_list({ page: 1, limit: 1, status: '4' }).then((res : any) => {
		// 	firstcount.value = res.count
		// })
		// orderApi.order_list({ page: 1, limit: 1, status: '6' }).then((res : any) => {
		// 	secondcount.value = res.count
		// })
	}
	function getList() {
		loadingRef.value.open(500)
		if (paging.value.create_time) {
			paging.value.pay_start_time = paging.value.create_time[0] / 1000
			paging.value.pay_end_time = paging.value.create_time[1] / 1000
			paging.value.pay_end_time = paging.value.pay_end_time + 86399
		} else {
			delete paging.value.pay_start_time
			delete paging.value.pay_end_time
		}
		// console.log(activeName.value,'activeName.value')
		// if (activeName.value === '0') {
		// 	paging.value.status = '3'
		// } else if (activeName.value === '1') {
		// 	paging.value.status = '4'
		// } else if (activeName.value === '2') {
		// 	paging.value.status = '6'
		// }
		// orderApi.order_list(paging.value).then((res : any) => {
		// 	if (res.code === 0) {
		// 		res.data.forEach((i : any) => {
		// 			if (i.gift_json) {
		// 				i.gift_json = JSON.parse(i.gift_json)
		// 			}
		// 		})

		// 		dataList.value = res.data
		// 		total.value = res.count
		// 	}
		// })
	}

	// 每页数量切换
	function sizeChange(e : any) {
		console.log(e, 'lll')
	}
	// 当前页码切换（翻页）
	function currentChange(e : any) {
		console.log(e, 'lll2')
		paging.value.page = e
		getList()
	}

	const form : any = ref({
		order_no: '2023070651565548',
		dec: '',
	})
	const formRules = ref({
		dec: [
			{ required: true, message: '请输入备注', trigger: 'blur' },
		],
		code: [
			{ required: true, message: '请输入核销码', trigger: 'blur' },
		],
		hxy_name: [
			{ required: true, message: '请选择核销员', trigger: 'blur' },
		],

	})

	const isquxiao : any = ref(false)
	function handlequxiao(e : any) {
		isquxiao.value = true
	}
	const formRef = ref()
	function submitedit() {

	}

	function arraySpanMethod(row : any) {
		if (row.row.is_top_row !== 0) {
			return [1, 6]
		}
	}
	function exports() {
		// 假设paging.value和pathurl.value是已经定义好的数据
		const queryString = Object.entries(paging.value)
			.map(([key, value]) => `${encodeURIComponent(key as any)}=${encodeURIComponent(value as any)}`)
			.join('&');
		const url = `${pathurl.value}Export/orderExport?${queryString}`
		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '文件名'); // 设置下载文件的名称
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
		// 导出
		//   uploading.value = true
		//   console.log(paging.value, 'paging.value')
		//   axios({
		//     method: 'post',
		//     url: `${pathurl.value}Export/orderExport`,
		//     params: paging.value,
		//     responseType: 'blob',
		//   })
		//     .then((res:any) => {
		//       console.log(res.data,'kkkk')
		//       const data = new Blob([res.data], {
		//         type: 'application/vnd.ms-excel;charset=utf-8',
		//       })
		//       const downloadUrl = window.URL.createObjectURL(data)
		//       const anchor = document.createElement('a')
		//       anchor.href = downloadUrl
		//       // // anchor.download = '订单表格.xlsx' // 表格名称.文件类型
		//       anchor.click()
		//       window.URL.revokeObjectURL(res.data) // 消除请求接口返回的list数据
		//       setTimeout(() => {
		//         uploading.value = false
		//       }, 2500)
		//     })
		//     .catch((err:any) => {
		//       uploading.value = false
		//       console.log(err)
		//     })

	}
</script>

<template>
	<div>
		<page-main>
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="订单号">
					<el-input v-model="paging.order_code" placeholder="请输入订单号" clearable />
				</el-form-item>
				<el-form-item label="会员手机号:">
					<el-input v-model="paging.phone" placeholder="请输入会员手机号" clearable />
				</el-form-item>
				<el-form-item label="下单时间:">
					<el-date-picker v-model="paging.create_time" type="daterange" range-separator="至" value-format="x"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getList()">
						<template #icon>
							<svg-icon name="ep:search" />
						</template>
						查询
					</el-button>
					<el-button @click="paging = {
              page: 1,
              limit: 10,
            }, getList()">
						重置
					</el-button>
					<el-button type="success" @click="exports()">
						<template #icon>
							<svg-icon name="ep:filter" />
						</template>
						导出
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane :label="`退款中(${refundcount})`" name="0" />
				<el-tab-pane :label="`已退款(${firstcount})`" name="1" />
				<el-tab-pane :label="`已拒绝(${secondcount})`" name="2" />
			</el-tabs> -->

			<div class="pr" v-loading="uploading">
				<div class="tables tables-top">
					<div class="table-top table-row">
						<div class="list-inner goods-des tc flex-1">
							产品
						</div>
						<div class="list-inner price tc">
							单价
						</div>
						<div class="list-inner num tc">
							数量
						</div>
						<!-- <div class="list-inner after_sale tc">
              售后
            </div> -->
						<div class="list-inner total_price tc">
							实付款
						</div>
						<div class="list-inner total_price tc">
							退款金额
						</div>

						<div class="list-inner pay_type tc">
							支付方式
						</div>
						<div class="list-inner order_status tc">
							订单状态
						</div>
						<div class="list-inner order_statusmsg tc">
							核销状态
						</div>
						<div class="list-inner operation tc">
							操作
						</div>
					</div>
				</div>
				<div class="orderlist relative min-h-30">
					<Loading ref="loadingRef" />
					<div v-if="dataList.length>0">
						<div class="tables mb-4" v-for="(i,j) in dataList" :key="j">
							<div class="head">
								<div class="d-s-c flex-1">
									<el-tag type="success" size="small" class="mr-4" v-if="i.invite_applet_user_id>0">
										分销单
									</el-tag>
									<el-tag type="danger" size="small" class="mr-4" v-if="i.invite_applet_user_id===0">
										直客单
									</el-tag>
									<div class="fb">
										订单编号：<span class="gray6 fbn">{{i.order_code}}</span>
									</div>
									<!-- <div class="fb ml-2.5 mr-8">
                  复制
                </div> -->
									<div class="fb ml-2.5 mr-8">
										下单时间：<span
											class="gray6 fbn">{{i.create_time>0? dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'-' }}</span>
									</div>
									<div class="fb ml-2.5 mr-8">
										用户：<span
											class="gray6 fbn">{{i.applet_user_info&&i.applet_user_info.nick_name?i.applet_user_info.nick_name :''}}
											{{i.applet_user_info&&i.applet_user_info.phone?i.applet_user_info.phone :''}}</span>
									</div>
								</div>
							</div>
							<div class="table-row">
								<div class="goods-des flex-1">
									<div class="ops d-s-c">
										<ImagePreview :src="i.image" style="width: 50px;height: 50px;" />
										<div class="ml-2.5" style="width: calc(100% - 50px);">
											<div class="blue2 fb f14 text-ellipsis" style="max-width: 350px;">
												{{i.name}}
											</div>
											<div class="gray6 f14 mt-1.5 text-ellipsis">
												赠品：<span v-if="i.gift_json && i.gift_json.length>0"><span
														v-for="(it,jt) in i.gift_json"
														:key="jt">{{it.gift_info?it.gift_info.name:''}}</span></span><span
													v-else>无赠品</span>
											</div>
										</div>
									</div>
									<!-- <div class="ops d-s-c">
                  <ImagePreview src="http://7fzzw2-app.029-360.com/images/2022/06/10/8f34cb72ac1244ee/dbe00c64535d6bff.png" style="width: 50px;height: 50px;" />
                  <div class="ml-2.5" style="width: calc(100% - 5px);">
                    <div class="blue2 fb f14">
                      扇子葵树
                    </div>
                    <div class="gray6 f14 mt-1.5">
                      赠品：矿泉水
                    </div>
                  </div>
                </div> -->
								</div>
								<div class="list-inner price">
									<div class="ops d-c-c">
										￥{{i.price/100}}
									</div>
									<!-- <div class="ops d-c-c tc">
                  ￥600.00
                </div> -->
								</div>
								<div class="list-inner num">
									<div class="ops d-c-c tc">
										{{i.num}}
									</div>
									<!-- <div class="ops d-c-c tc">
                  1
                </div> -->
								</div>

								<!-- <div class="list-inner after_sale">
                <span class="blue2">买家发起维权</span>
              </div> -->
								<div class="list-inner total_price tc">
									<div class="blue2 f16 fb">
										￥{{i.reality_price/100}}
									</div>
								</div>
								<div class="list-inner total_price tc">
									<div class="blue2 f16 fb">
										￥{{i.refund_money/100}}
									</div>
								</div>

								<div class="list-inner pay_type tc">
									微信支付
								</div>
								<div class="list-inner order_status">
									<div class="">
										<el-tag type="info" v-if="i.is_pay===0">
											未支付
										</el-tag>
										<el-tag type="success" v-if="i.is_pay===1">
											已支付
										</el-tag>

									</div>
								</div>
								<div class="list-inner order_statusmsg">
									<div class="" v-if="i.status===2">
										<div>
											<div class="mt-1.5">
												核销类型：{{i.check_type===1?'后台核销':'小程序核销'}}
											</div>
											<div class="mt-1.5">
												核销员：{{i.check_type===1&&i.check_user_info && i.check_user_info.realname?i.check_user_info.realname:i.check_type===2?i.check_staff_name+` (${i.check_user_info.phone?i.check_user_info.phone:''})`:''}}
											</div>
											<div class="mt-1.5">
												核销门店：{{i.check_type===1?'-':i.shop_info && i.shop_info.name?i.shop_info.name:''}}
											</div>
											<div class="mt-1.5">
												核销时间：{{i.check_time>0? dayjs(i.check_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
											</div>
										</div>
										<!-- <el-tag type="info" v-if="i.status===0">
										待支付
									</el-tag>
									<el-tag type="" v-if="i.status===1">
										待使用
									</el-tag>
									<el-tag type="success" v-if="i.status===2">
										已核销
									</el-tag>
									<el-tag type="danger" v-if="i.status===3">
										退款申请中
									</el-tag>
									<el-tag type="info" v-if="i.status===4">
										已退款
									</el-tag>
									<el-tag type="warning" v-if="i.status===5">
										关闭单
									</el-tag>
									<el-tag type="danger" v-if="i.status===6">
										拒绝退款
									</el-tag> -->
									</div>
									<div class="" v-if="i.status!==2">
										<el-tag type="danger">
											未核销
										</el-tag>
									</div>
								</div>
								<div class="list-inner operation">
									<el-button type="primary" text @click="detail(i)">
										详情
									</el-button>
								</div>
							</div>
							<div class="table-footer">
								<el-row>
									<el-col :sm="24" :md="12">
										<div class="">
											<span class="fb">买家留言：</span><span class="gray6">{{i.remark}}</span>
										</div>
									</el-col>
									<el-col :sm="24" :md="12">
										<div class="">
											<span class="fb">商家备注：</span><span
												class="blue2">{{i.desc?i.desc[0].remark:'暂无备注'}}</span><span
												class="gray9 ml10">(仅商家可见)</span>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
					<div v-else class="flex justify-center items-center min-h-50">
						<div class="flex justify-center items-center d-c">
							<div>
								<img class="w-46 h-30" :src="nodata">
							</div>
							<div>
								暂无数据
							</div>
						</div>
					</div>
				</div>

				<el-pagination :current-page="paging.page" :total="total" :page-size="paging.size"
					:page-sizes="paging.sizes" :layout="paging.layout" :hide-on-single-page="false" class="pagination"
					background @current-change="currentChange" @size-change="sizeChange" />
			</div>
		</page-main>

		<!-- 取消订单 -->
		<el-dialog v-model="isquxiao" title="取消订单" width="460px">
			<el-form ref="formRef" :rules="formRules" :model="form" label-width="60px">
				<el-form-item label="订单号">
					<el-input v-model="form.order_no" :disabled="true" />
				</el-form-item>
				<el-form-item label="备注" prop="dec">
					<el-input v-model="form.dec" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="isquxiao = false">
					取消
				</el-button>
				<el-button type="primary" @click="submitedit()">
					确定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<style scoped lang="scss">
	.orderlist {
		margin-top: 10px;
		margin-bottom: 30px;
	}

	.tables {
		font-size: 14px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		transition: all 0.3s ease;

		.head {
			padding: 10px 12px;
			font-size: 14px;
			background: #f9f9f9;
			border-bottom: 1px solid #e5e5e5;
		}
	}

	.tables.tables-top {
		border-radius: 0;
	}

	.table-row {
		display: -webkit-box;
		display: flex;
		display: flexbox;
		display: flex;
		place-content: space-around center;
	}

	.table-row>div {
		padding: 12px;
	}

	.tables .list-inner {
		vertical-align: middle;
		border-right: 1px solid #e2e2e2;
	}

	.tables .list-inner.price,
	.tables .list-inner.num {
		width: 140px;
		padding: 0 12px;
	}

	.tables .list-inner.num {
		width: 90px;
	}

	.tables .list-inner.total_price {
		width: 150px;
	}

	.tables .list-inner.pay_type {
		width: 110px;
	}

	.tables .list-inner.order_status {
		width: 100px;
	}

	.tables .list-inner.order_statusmsg {
		width: 250px;
	}

	.tables .list-inner.operation {
		flex-direction: row;
		align-items: center;
		width: 100px;
		text-align: center;
	}

	.tables .list-inner.after_sale {
		width: 120px;
		text-align: center;
	}

	.table-row .goods-des {
		padding: 0 12px;
		vertical-align: middle;
		border-right: 1px solid #e2e2e2;
	}

	.table-row.table-top {
		background: #f1f1f1;
	}

	.table-row .ops {
		min-height: 75px;
		padding: 12px;
		margin: 0 -12px;
		border-bottom: 1px solid #e2e2e2;
	}

	.table-row .ops:last-child {
		border-bottom: none;
	}

	.table-row .list-inner {
		display: -webkit-box;
		display: flex;
		display: flexbox;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.table-footer {
		padding: 10px;
		border-top: 1px solid #e5e5e5;
	}

	.table-footer>div {
		padding: 4px 0;
		font-size: 14px;
	}
</style>